import { Button, Drawer } from "antd";
import React, { useState } from "react";
import { animation } from "../../../mock/index";
import "./Donghua.scss";
import "animate.css"

const Donghua = () => {
  console.log(animation, "animation");

  //   tab切换高亮状态
  const [activeTab, setActiveTab] = useState(0);
  //   侧边对话框开关
  const [open, setOpen] = useState(false);

  const [istabval, setIstabval] = useState(0);
  const [istablab, setIstablab] = useState("");

  const handleTabClick = (index: number) => {
    setActiveTab(index);
  };

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };

  //   控制页面上的某些动画效果
  const tabval = (item: { label?: string; value: any; }, index: React.SetStateAction<number>) => {
    setIstabval(index);
    setIstablab("animate__animated animate__" + item.value);
  };

  //   setTimeout(() => {
  //     setIstabval(0);
  //     setIstablab("");
  //   }, 5000);
  
  return (
    <>
      <Button
        onClick={showDrawer}
        style={{
          width: "100px",
          height: "50px",
          background: "white",
          marginLeft: "30px",
        }}
      >
        添加动画
      </Button>
      <Button
        style={{
          width: "100px",
          height: "50px",
          background: "white",
          marginLeft: "50px",
        }}
      >
        预览动画
      </Button>
      <Drawer onClose={onClose} open={open} placement={"left"}>
        <div className="tabs">
          {animation.map((tab, index) => (
            <div
              key={index}
              className={`tab-label ${index === activeTab ? "active" : ""}`}
              onClick={() => handleTabClick(index)}
            >
              {tab.label}
            </div>
          ))}
        </div>
        <div className="tab-content">
          {animation[activeTab].children.map((item, index) => (
            <div
              key={index}
              className={`tabitem ${istabval === index ? istablab : ""}`}
              onMouseMove={() => {
                tabval(item, index);
              }}
            >
              {item.label}
            </div>
          ))}
        </div>
      </Drawer>
    </>
  );
};

export default Donghua;